<!doctype html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <style>
        * {
            font-family: "等线";
        }
        
        .mainTitle {
            color: black;
            text-align: center;
            font-weight: bold;
            font-size: 20px;
        }
        
        .subTitle {
            background-color: rgb(189, 238, 170);
            color: black;
            text-align: left;
            float: top;
            clear: both;
            font-weight: bold;
            font-size: 18px;
            /* height: 25px; */
        }
        
        .splitLine {
            clear: both;
            border: 1px solid green;
        }
        
        .itemTextStyle {
            height: 30px;
            font-weight: bold;
            font-size: 14px;
            text-align: left;
            vertical-align: middle;
        }
        
        .proItemName {
            background-color: white;
            color: green;
            width: 150px;
            float: left;
        }
        
        .proItemValue {
            background-color: white;
            width: 250px;
            float: left;
            color: black;
        }
        
        .abilityItemName {
            background-color: white;
            width: 150px;
            float: left;
            color: rgb(0, 128, 90);
        }
        
        .abilityItemValue {
            background-color: white;
            width: 150px;
            float: left;
            color: darkred;
        }
        
        .subResultItemName {
            float: left;
            color: darkblue;
            width: 150px;
        }
        
        .subResultItemValue {
            float: left;
            color: red;
            width: 150px;
        }
        
        .gradeDescribe {
            font-size: 14px;
            line-height: 20px;
        }
        
        .resultLeft {
            width: 300px;
            float: left;
        }
        
        .resultRight {
            float: left;
            width: 500px;
            height: 300px;
        }
        /* 表格样式 */
        
        table {
            width: 100%;
            border-collapse: collapse;
        }
        
        table caption {
            font-size: 2em;
            font-weight: bold;
            margin: 1em 0;
        }
        
        th,
        td {
            border: 1px solid #999;
            text-align: center;
            padding: 5px 0;
            font-size: 14px;
        }
        
        table tbody tr:nth-child(odd) {
            background-color: #eee;
        }
        
        table tbody tr:hover {
            background-color: #ccc;
        }
        /*        table, tr, td, th, tbody, thead, tfoot {*/
        /*    page-break-inside: avoid !important;*/
        /*}*/
        
        table tr {
            page-break-inside: avoid;
        }
        
        .tableLeftLine {
            border-left: none;
        }
        
        .tableRightLine {
            border-right: none;
        }
        
        .tableItemName {
            color: rgb(0, 128, 90);
            vertical-align: top;
        }
        
        .tableItemValue {
            color: darkred;
            vertical-align: top;
        }
    </style>
    <!-- <script src="D:\echarts.min.js"></script> -->
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>

<body>
    <div class='mainTitle'>
        <h1> 智能分级检测报告单 </h1>
    </div>
    <div id="subTitleProjectMessage" class='subTitle'>
        <hr class="splitLine" /> 项目信息
        <hr class="splitLine" />
    </div>
    <div>
        <div>
            <div class='proItemName itemTextStyle'> 项目名称:</div>
            <div class='proItemValue itemTextStyle'> 测试项目</div>
        </div>
        <div>
            <div class='proItemName itemTextStyle'> 版本:</div>
            <div class='proItemValue itemTextStyle'> 2.3</div>
        </div>

        <div>
            <div class='proItemName itemTextStyle'> 研发单位:</div>
            <div class='proItemValue itemTextStyle'> 电子科技大学</div>
        </div>
        <div>
            <div class='proItemName itemTextStyle'> 委托单位:</div>
            <div class='proItemValue itemTextStyle'> 实验室</div>
        </div>

        <div>
            <div class='proItemName itemTextStyle'> 测评人:</div>
            <div class='proItemValue itemTextStyle'> 张兵</div>
        </div>
        <div>
            <div class='proItemName itemTextStyle'> 建立时间:</div>
            <div class='proItemValue itemTextStyle'> 2021-05-29 17:08:14</div>
        </div>
    </div>
    <!-- <div class='proItemName'> 项目名称:<br>版本:<br>研发单位:<br>委托单位:<br> </div>
    <div class='proItemValue'> 测试项目<br>2.3<br>电子科技大学<br>实验室<br> </div>
    <div class='proItemName'> 测评人:<br>建立时间:<br> </div>
    <div class='proItemValue'> 张兵<br>2021-05-29 17:08:14<br> </div> -->
    <div class='subTitle'>
        <hr class="splitLine" /> 检测结果
        <hr class="splitLine" />
    </div>
    <div>
        <div>
            <div class='subResultItemName itemTextStyle'> 智能等级:</div>
            <div class='subResultItemValue itemTextStyle'> 3级</div>
        </div>
        <div>
            <div class='subResultItemName itemTextStyle'> 智能评分</div>
            <div class='subResultItemValue itemTextStyle'> 7.8</div>
        </div>
    </div>
    <hr class="splitLine" />
    <div class="resultLeft">
        <div>
            <div class='abilityItemName itemTextStyle'> 管理能力:</div>
            <div class='abilityItemValue itemTextStyle'> 5.76</div>
        </div>
        <div>
            <div class='abilityItemName itemTextStyle'> 探测能力:</div>
            <div class='abilityItemValue itemTextStyle'> 6.81</div>
        </div>
        <div>
            <div class='abilityItemName itemTextStyle'> 理解能力:</div>
            <div class='abilityItemValue itemTextStyle'> 8.21</div>
        </div>
        <div>
            <div class='abilityItemName itemTextStyle'> 表达能力:</div>
            <div class='abilityItemValue itemTextStyle'> 7.21</div>
        </div>
        <div>
            <div class='abilityItemName itemTextStyle'> 规划能力:</div>
            <div class='abilityItemValue itemTextStyle'> 6.31</div>
        </div>
        <div>
            <div class='abilityItemName itemTextStyle'> 构建能力:</div>
            <div class='abilityItemValue itemTextStyle'> 5.91</div>
        </div>
        <div>
            <div class='abilityItemName itemTextStyle'> 组织能力:</div>
            <div class='abilityItemValue itemTextStyle'> 4.71</div>
        </div>
        <div>
            <div class='abilityItemName itemTextStyle'> 利用能力:</div>
            <div class='abilityItemValue itemTextStyle'> 2.41</div>
        </div>
        <div>
            <div class='abilityItemName itemTextStyle'> 调度能力:</div>
            <div class='abilityItemValue itemTextStyle'> 1.51</div>
        </div>
        <div>
            <div class='abilityItemName itemTextStyle'> 生成能力:</div>
            <div class='abilityItemValue itemTextStyle'> 3.81</div>
        </div>
    </div>
    <div class="resultRight" id="pieChart">

    </div>
    <div class='subTitle'>
        <hr class="splitLine" /> 分级描述
        <hr class="splitLine" />
    </div>
    <div class='gradeDescribe'>
        第五代系统在态势感知、指挥决策、行动控制、支援保障、信息服务等功能要素基础上，扩展平行推演与学习训练功能域，满足作战分支评估及算法的学习需要。在态势认知方面，涵盖了计算智能、感知智能与认知智能，主要完成战场情报处理及目标识别，对态势进行理解、预测，有态有势，提升信息优势；指挥决策方面，以认知智能为主，能够机器战术推理、生成方案与计划，提升决策水平；行动控制方面，以计算智能与认知智能为主，完成任务监控及临机战术控制，提供知识推理的行动优化策略
    </div>

    <div class='subTitle'>
        <hr class="splitLine" /> 评分详情
        <hr class="splitLine" />
    </div>

    <table>
        <!-- <caption>得分详情</caption> -->
        <thead>
            <tr>
                <th class="tableLeftLine">业务能力</th>
                <th>得分</th>
                <th>分级要素</th>
                <th class="tableRightLine">得分</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td rowspan="3" class="tableLeftLine tableItemName">管理能力</td>
                <td rowspan="3" class="tableRightLine tableItemValue">5.76</td>
                <td class='tableItemName'>元素1</td>
                <td class="tableRightLine tableItemValue">3.2</td>
            </tr>
            <tr>
                <td class='tableItemName'>元素2</td>
                <td class="tableRightLine tableItemValue">3.4</td>
            </tr>
            <tr>
                <td class='tableItemName'>元素3</td>
                <td class="tableRightLine tableItemValue">5.6</td>
            </tr>
            <tr>
                <td rowspan="3" class="tableLeftLine tableItemName">探测能力</td>
                <td rowspan="3" class="tableRightLine tableItemValue">3.76</td>
                <td class='tableItemName'>元素1</td>
                <td class="tableRightLine tableItemValue">3.2</td>
            </tr>
            <tr>
                <td class='tableItemName'>元素2</td>
                <td class="tableRightLine tableItemValue">3.4</td>
            </tr>
            <tr>
                <td class='tableItemName'>元素3</td>
                <td class="tableRightLine tableItemValue">5.6</td>
            </tr>
            <tr>
                <td rowspan="3" class="tableLeftLine tableItemName">理解能力</td>
                <td rowspan="3" class="tableRightLine tableItemValue">8.76</td>
                <td class='tableItemName'>元素1</td>
                <td class="tableRightLine tableItemValue">3.2</td>
            </tr>
            <tr>
                <td class='tableItemName'>元素2</td>
                <td class="tableRightLine tableItemValue">3.4</td>
            </tr>
            <tr>
                <td class='tableItemName'>元素3</td>
                <td class="tableRightLine tableItemValue">2.4</td>
            </tr>
            <tr>
                <td rowspan="3" class="tableLeftLine tableItemName">理解能力</td>
                <td rowspan="3" class="tableRightLine tableItemValue">6.76</td>
                <td class='tableItemName'>元素1</td>
                <td class="tableRightLine tableItemValue">3.2</td>
            </tr>
            <tr>
                <td class='tableItemName'>元素2</td>
                <td class="tableRightLine tableItemValue">3.4</td>
            </tr>
            <tr>
                <td class='tableItemName'>元素3</td>
                <td class="tableRightLine tableItemValue">7.8</td>
            </tr>
            <tr>
                <td rowspan="3" class="tableLeftLine tableItemName">规划能力</td>
                <td rowspan="3" class="tableRightLine tableItemValue">3.76</td>
                <td class='tableItemName'>元素1</td>
                <td class="tableRightLine tableItemValue">3.2</td>
            </tr>
            <tr>
                <td class='tableItemName'>元素2</td>
                <td class="tableRightLine tableItemValue">3.4</td>
            </tr>
            <tr>
                <td class='tableItemName'>元素3</td>
                <td class="tableRightLine tableItemValue">9.6</td>
            </tr>
            <tr>
                <td rowspan="3" class="tableLeftLine tableItemName">构建能力</td>
                <td rowspan="3" class="tableRightLine tableItemValue">8.76</td>
                <td class='tableItemName'>元素1</td>
                <td class="tableRightLine tableItemValue">3.2</td>
            </tr>
            <tr>
                <td class='tableItemName'>元素2</td>
                <td class="tableRightLine tableItemValue">3.4</td>
            </tr>
            <tr>
                <td class='tableItemName'>元素3</td>
                <td class="tableRightLine tableItemValue">4.6</td>
            </tr>

            <tr>
                <td rowspan="3" class="tableLeftLine tableItemName">利用能力</td>
                <td rowspan="3" class="tableRightLine tableItemValue">5.76</td>
                <td class='tableItemName'>元素1</td>
                <td class="tableRightLine tableItemValue">3.2</td>
            </tr>
            <tr>
                <td class='tableItemName'>元素2</td>
                <td class="tableRightLine tableItemValue">3.4</td>
            </tr>
            <tr>
                <td class='tableItemName'>元素3</td>
                <td class="tableRightLine tableItemValue">7.5</td>
            </tr>
            <tr>
                <td rowspan="3" class="tableLeftLine tableItemName">调度能力</td>
                <td rowspan="3" class="tableRightLine tableItemValue">4.76</td>
                <td class='tableItemName'>元素1</td>
                <td class="tableRightLine tableItemValue">3.2</td>
            </tr>
            <tr>
                <td class='tableItemName'>元素2</td>
                <td class="tableRightLine tableItemValue">3.4</td>
            </tr>
            <tr>
                <td class='tableItemName'>元素3</td>
                <td class="tableRightLine tableItemValue">4.1</td>
            </tr>
            <tr>
                <td rowspan="3" class="tableLeftLine tableItemName">调度能力</td>
                <td rowspan="3" class="tableRightLine tableItemValue">3.76</td>
                <td class='tableItemName'>元素1</td>
                <td class="tableRightLine tableItemValue">3.2</td>
            </tr>
            <tr>
                <td class='tableItemName'>元素2</td>
                <td class="tableRightLine tableItemValue">3.4</td>
            </tr>
            <tr>
                <td class='tableItemName'>元素3</td>
                <td class="tableRightLine tableItemValue">8.7</td>
            </tr>
        </tbody>
    </table>

    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('pieChart'));
        var option = {
            animation: false,
            series: [{
                name: '访问来源',
                type: 'pie',
                radius: '55%',
                data: [{
                    value: 5.76,
                    name: "管理能力"
                }, {
                    value: 6.41,
                    name: "探测能力"
                }, {
                    value: 7.38,
                    name: "理解能力"
                }, {
                    value: 7.83,
                    name: "表达能力"
                }, {
                    value: 8.11,
                    name: "规划能力"
                }, {
                    value: 7.17,
                    name: "构建能力"
                }, {
                    value: 7.88,
                    name: "组织能力"
                }, {
                    value: 7,
                    name: "利用能力"
                }, {
                    value: 6.49,
                    name: "调度能力"
                }, {
                    value: 6.35,
                    name: "生成能力"
                }, ],
                roseType: 'angle',
                itemStyle: {
                    normal: {
                        shadowBlur: 200,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }]
        };
        myChart.setOption(option);
    </script>
</body>

</html>